import { ProCard, StatisticCard } from '@ant-design/pro-components'
import { useState, FC, useEffect } from 'react'
import { useSelector, useDispatch } from 'dva'

import { history } from 'umi'
import useRequest from '@ahooksjs/use-request'
import { PlusOutlined, LeftCircleOutlined, LeftCircleTwoTone } from '@ant-design/icons'
import styles from './index.less'

import { Button, PageHeader, Input, message, Form, Popconfirm, Image } from 'antd'
import { allStudentData } from '@/services/studentManagement/types'
import studentMagServices from '@/services/studentManagement'

interface emoUrl {
  emotion: string
  renzhiUrl: string
}

const courseResearch: FC = () => {
  const [update, setUpdate] = useState(0)
  const [emoUrl, setEmoUrl] = useState<emoUrl>()
  //获取学生情感图片
  const { data: studentEmourl, run: getEmourl } = useRequest(studentMagServices.getStudentEmourl, {
    manual: true,
    onSuccess: (res) => {
      setEmoUrl(res)
    }
  })
  const studentInfo = useSelector((state: any) => state.saveInfo.student)
  useEffect(() => {
    if (studentInfo.studentId == '') {
      history.push('./studentManagement')
      message.warn('请先选择要查看的学生！')
    } else {
      getEmourl({ studentId: studentInfo.studentId })
    }
  }, [update])
  return (
    <div>
      <div className={styles.header}>
        <PageHeader
          backIcon={<LeftCircleTwoTone />}
          title="学生分析"
          onBack={() => history.push('./studentManagement')}
        ></PageHeader>
      </div>
      <div className={styles.ContentStyle}>
        <ProCard split={'vertical'} bordered hoverable>
          {' '}
          <ProCard colSpan="30%">
            <ProCard split={'horizontal'}>
              {' '}
              <ProCard style={{ height: '500px' }}>
                <div style={{ marginTop: '70px' }}>
                  <Image
                    src={studentInfo.studentPhoto}
                    fallback=""
                  ></Image>
                </div>
              </ProCard>
              <ProCard>
                {' '}
                <div
                  style={{
                    fontSize: '20px',
                    marginLeft: '60px',
                    marginTop: '20px',
                    fontWeight: 'bold'
                  }}
                >
                  <span>{`情感参与：${emoUrl?.emotion}`}</span>
                </div>
              </ProCard>
            </ProCard>
          </ProCard>
          <ProCard>
            <div>
              <ProCard
                bodyStyle={{ fontSize: '17px' }}
              >{`姓名：${studentInfo.studentName}`}</ProCard>
              <ProCard
                bodyStyle={{ fontSize: '17px' }}
              >{`性别：${studentInfo.studentSex}`}</ProCard>
              <ProCard
                bodyStyle={{ fontSize: '17px' }}
              >{`学号：${studentInfo.studentNumber}`}</ProCard>
              <ProCard
                bodyStyle={{ fontSize: '17px' }}
              >{`年级：${studentInfo.studentGrade}`}</ProCard>
              <ProCard
                bodyStyle={{ fontSize: '17px' }}
              >{`班级：${studentInfo.studentClass}`}</ProCard>
              <ProCard>
                {' '}
                <StatisticCard>
                  <Image src={emoUrl?.renzhiUrl}></Image>
                </StatisticCard>
              </ProCard>
            </div>
          </ProCard>
        </ProCard>
      </div>
    </div>
  )
}
export default courseResearch
